<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
</head>
<body>

{% csrf_token %}


<input type="text" name="i1">+
<input type="text" name="i2">=
<input type="text" name="i3">
<button id="b1">计算</button>
<br>
<button id="b2">参数的测试</button>
<br>
<input type="file" id="f1">
<button id="b3">上传文件</button>


<script src="{% static 'jquery.3.4.1.js' %}"></script>
<script src="{% static 'ajax_setup.js' %}"></script>
<script>

    $('#b1').click(function () {

        // 发ajax请求
        $.ajax({
            url: '/calc/',
            type: 'post',
            data: {
                'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val(),
                'x1': $('[name="i1"]').val(),
                'x2': $('[name="i2"]').val(),
            },
            success: function (res) {
                $('[name="i3"]').val(res)
                {#location.href = res#}
            }

        })
    })


    $('#b2').click(function () {

        // 发ajax请求
        $.ajax({
            url: '/test/',
            type: 'post',
            headers: {
                'x-csrftoken': $('[name="csrfmiddlewaretoken"]').val(),
            },
            data: {
                'name': 'alex',
                'age': 84,
                'hobby': JSON.stringify(['抽烟', '喝酒', '大保健'])
            },
            success: function (res) {
                console.log(res)
                {#res = JSON.parse(res)#}
                console.log(res.status)
            },
            error: function (res) {
                console.log(res)
            }

        })
    })


    $('#b3').click(function () {

        var form = new FormData();
        form.append('filename', 'xxxxx')
        form.append('f1', $('#f1')[0].files[0])


        // 发ajax请求
        $.ajax({
            url: '/upload/',
            type: 'post',
            processData: false,   // 不需要处理编码方式
            contentType: false,   // 不需要处理contentType
            data: form,
            success: function (res) {
                console.log(res)
                {#res = JSON.parse(res)#}
                console.log(res.status)
            },

        })
    })

</script>


</body>
</html>